<template>
  <div class="video-live">
    <div class="search-panel">
      <video-tree 
         ref="videoTree"
        :auto-load="false"
        :height="siteContentViewHeight"
        @handleNodeClick="handleNodeClick"
      />
    </div>
    <div class="video-panel">
      <div class="video-title">
        <span style="margin-right: 25px" v-if="videoDetail">
        <span class="blod">{{videoDetail.pointName}} {{videoDetail.monitorName}}</span>
        </span>
        <el-date-picker 
          style="margin-left: 20px"
          v-model="startTimeStamp"  
          value-format="yyyy-MM-dd HH:mm:ss" 
          type="datetime" placeholder="选择回放开始时间"  @focus="hideThis" @blur="showThis" @change="showThis">
        </el-date-picker>
        <el-date-picker placement="top" v-model="endTimeStamp"  
          value-format="yyyy-MM-dd HH:mm:ss" style="margin-left: 20px;z-index=1000000;position:relative;"
        type="datetime" placeholder="选择回放结束时间"  @focus="hideThis" @blur="showThis" @change="showThis"></el-date-picker>
        <el-button type="primary" @click="playBack" style="margin-left: 20px">回放</el-button>
        <el-button type="primary" @click="stopBack">停止回放</el-button>
      </div>

      <div class="video-box" ref="panel"> 
        <main-video 
        ref="video"
        @onSuccess="onSuccess"
        :playMode="1"
        v-if="appkey"
        layout="1x1"
        id="video1"
        :ichannelId="[]"
        :swfHeight="swfHeight"
        :swfWidth="swfWidth"
        :appkey="appkey"
        :secret="secret"
        :port="port"
        :ip="ip" />
      </div>
    </div>
  </div>
</template>
<script>
import VideoTree from '../../components/video-tree';
import MainVideo from '../../components/video';
export default {
  components: {
    VideoTree, MainVideo
  },
  data() {
    const endTime = this.$moment(new Date()).format('YYYY-MM-DD HH:mm:ss');
    const startTime = this.$moment(new Date()).subtract(2, 'hours').format('YYYY-MM-DD HH:mm:ss');
    return {
      ichannelId: '',
      videoDetail: {},
      startTimeStamp: startTime,
      endTimeStamp: endTime,
      pointid: '',
      swfWidth: '',
      swfHeight: '',
      appkey: '',
      secret: '',
      port: '',
      ip: ''
    };
  },
  computed: {
    documentClientHeight: {
      get() { return this.$store.state.common.documentClientHeight; }
    },
    siteContentViewHeight() {
      var height = this.documentClientHeight - 70 - 30 - 20 - 60 - 2;
      if (this.$route.meta.isTab) {
        height -= 40;
        return height + 'px';
      }
    }
  },
  mounted() {
    const panel = this.$refs.panel;
    this.swfWidth = panel.clientWidth;
    this.swfHeight = panel.clientHeight;
    this.getVideoInfo();
  },
  methods: {
    hideThis() {
      this.$refs.video.hideVideo();
    },
    showThis() {
    },
    // 控件初始化完成
    onSuccess() {
      this.$refs.videoTree.load();
    },
    handleNodeClick(data) {
      this.ichannelId = data.ichannelId;
      if (this.ichannelId) {
        this.videoDetail = data;
        this.playBack(this.ichannelId);
      }
    },
    getVideoInfo() {
      const params = {
        url: `/api/ems/video/get`,
        type: 'post',
        params: {
        }
      };
      this.$ajax(params).then(resp => {
        const { result, data } = resp;
        if (result) {
          this.appkey = data.accessName;
          this.secret = data.accessPwd;
          this.port = data.videoPort;
          this.ip = data.videoAddress;
        }
      });
    },
    // 回放
    playBack() {
      this.$refs.video.showVideo();
      const startTime = Math.floor(new Date(this.startTimeStamp) / 1000).toString();
      const endTime = Math.floor(new Date(this.endTimeStamp) / 1000).toString();
      console.log(`this.startTimeStamp`, this.startTimeStamp);
      console.log(`this.endTimeStamp`, this.endTimeStamp);
      this.$refs.video.backVideo(startTime, endTime, this.ichannelId);
    },
    stopBack() {
      this.$refs.video.stop();
    }
  }
};
</script>

<style lang="scss" scoped>
@import '~@/assets/scss/variables';
.video-live{
  width: 100%;
  height: 100%;
  display: flex;
  .search-panel{
    border: 1px solid rgba(0, 21, 41, 0.12);
  }
  .video-panel{
    flex: 1;
    height: 100%;
    overflow-y: auto;
    .video-title{
      height: 65px;
      border: 1px solid rgba(0, 21, 41, 0.12);
      border-left: none;
      font-size: 16px;
      line-height: 65px;
      padding-left: 25px;
      .blod{
        font-weight: bold;
      }
    }
  }
  .video-box{
    //padding: 15px;
    border-bottom: 1px solid rgba(0, 21, 41, 0.12);
    border-right: 1px solid rgba(0, 21, 41, 0.12);
    height: calc(100% - 65px);
  }

}
</style>